<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>淘宝界面-2</title>
		<style>
			@font-face{
				font-family:iconfont;
				src:url(//at.alicdn.com/t/font_403341_n8tj33yn5peng66r.eot);
				src:url(//at.alicdn.com/t/font_403341_n8tj33yn5peng66r.eot?#iefix) format('embedded-opentype')
				,url(//at.alicdn.com/t/font_403341_n8tj33yn5peng66r.woff) format('woff'),
				url(//at.alicdn.com/t/font_403341_n8tj33yn5peng66r.ttf) format('truetype'),
				url(//at.alicdn.com/t/font_403341_n8tj33yn5peng66r.svg#iconfont) format('svg');
			}
			.iconfont{
				font-family: iconfont!important;
    			font-size: 14px
			}
			*{
				margin:0;
				padding:0;
			}
			body{
				font-family: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
				font-size: 14px;
				color: #999;
				background: #f4f4f4;
			}
			.box{
				width:100%;
				background-color: #f4f4f4;
				height: 600px;
			}
			.row{
				width:1190px;
				margin: 0 auto;
				background-color: #f4f4f4;
			}
			.col{
				width:590px;
				background-color: white;
				padding:17px 21px 4px 17px;
				box-sizing: border-box;
			}
			.clearfix:after{
				display:table;
				content: "";
				clear: both;
			}
			.fl{
				float:left;
			}
			.fr{
				float:right;
			}
			img{
				vertical-align: middle;
			}
			li{
				list-style:none;
				margin-left: 4px;
				margin-top: 4px;
				margin-bottom: 17px;
			}
			.top{
				margin-bottom: 10px;
			}
			.top .txt{
				height: 24px;
				line-height: 24px;
			}
			.txt a{
				text-decoration: none;
				color: #3c3c3c;
				margin-right: 8px;
			}
			.top .img img{
				height: 24px;
				margin-right: 8px;
				margin-left: 4px;
			}
			ul .txt{
				margin-bottom: 10px;
			}
			li:hover a{
				color: #f40;
			}
			li .imgl img{
				width: 180px;
				height: 180px;
			}
			li .imgr img{
				width: 89px;
				height: 89px;
			}
			li .imgr{
				margin-left: 2px;
			}
			li .imgr .imgb{
				margin-top: 2px;
			} 
			li .imgl,.imgr .imgt,.imgr .imgb{
				background-color: #4f4f4f;
			}
			li .img a:hover img{
				opacity: 0.8;
			}
			.col:nth-of-type(2).imgl img{
				position: relative;
			}
			.flow{
				position: absolute;
				top:146px;
				color: white;
				height: 34px;
				width:180px;
				background-color: rgba(0,0,0,0.1);
				z-index:0;
			}
			.iconfont{
				font-size: 28px; 
				color:#ff2658;
				float: left;
				margin-left:16px;
				margin-top: -3px;
				margin-right: 1px;
			}
			.whitebg{
				background-color: white;
				 height:9px; 
				 width: 24px; 
				 position: absolute;
				 left:18px;
				 top:6px;
				 z-index:-1;
			}
		</style>
	</head>
	<body>
		<div class="row clearfix">
			<div class="col fl">
				<div class="top clearfix">
					<div class="img fl"><img src="image/2-icon-1.png" title="每日好店"/></div>
					<div class="txt txtl fl">发现深藏的好店</div>
					<div class="txt txtr fr">更多 &gt;</div>
				</div>
				<ul class="clearfix">
					<li class="fl">
						<div class="txt"><a href="#">今日推荐</a><span>暂无店铺评价</span></div>
						<div class="img clearfix">
							<div class="img imgl fl"><a href="#"><img src="image/2-image-1.jpg" /></a></div>
							<div class="img imgr fl">
								<div class="imgt"><a href="#"><img src="image/2-image-2.jpg" /></a></div>
								<div class="imgb"><a href="#"><img src="image/2-image-3.jpg" /></a></div>
							</div>
						</div>
					</li>
					<li class="fl">
						<div class="txt"><a href="#">包包控</a><span>月收藏17296次</span></div>
						<div class="img clearfix">
							<div class="img imgl fl"><a href="#"><img src="image/2-image-4.jpg" /></a></div>
							<div class="img imgr fl">
								<div class="imgt"><a href="#"><img src="image/2-image-5.jpg" /></a></div>
								<div class="imgb"><a href="#"><img src="image/2-image-6.jpg" /></a></div>
							</div>
						</div>
					</li>
					<li class="fl">
						<div class="txt"><a href="#">推荐栏目</a><span>暂无店铺评价</span></div>
						<div class="img clearfix">
							<div class="img imgl fl"><a href="#"><img src="image/2-image-7.jpg" /></a></div>
							<div class="img imgr fl">
								<div class="imgt"><a href="#"><img src="image/2-image-8.jpg" /></a></div>
								<div class="imgb"><a href="#"><img src="image/2-image-9.jpg" /></a></div>
							</div>
						</div>
					</li>
					<li class="fl">
						<div class="txt"><a href="#">吃吃吃</a><span>月收藏11812次</span></div>
						<div class="img clearfix">
							<div class="img imgl fl"><a href="#"><img src="image/2-image-10.jpg" /></a></div>
							<div class="img imgr fl">
								<div class="imgt"><a href="#"><img src="image/2-image-11.jpg" /></a></div>
								<div class="imgb"><a href="#"><img src="image/2-image-12.jpg" /></a></div>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="col fr">
				<div class="top clearfix">
					<div class="img fl"><img src="image/2-icon-2.png" title="淘宝直播" /></div>
					<div class="txt txtl fl">你的爱豆直播等你哟</div>
				</div>
				<ul class="clearfix">
					<li class="fl">
						<div class="txt"><a href="#">四川小妹二妹</a><span>7349观看</span></div>
						<div class="img clearfix">
							<div class="img imgl fl" style="position: relative;">
								<a href="#"><img src="image/2-image-13.jpg" /></a>
								<div class="flow">
									<div class="iconfont">&#xe633;</div>
									<div class="whitebg"></div>
									<div>无辣不欢 麻辣香肠</div>
								</div>
							</div>
							<div class="img imgr fl">
								<div class="imgt"><a href="#"><img src="image/2-image-14.jpg" /></a></div>
								<div class="imgb"><a href="#"><img src="image/2-image-15.jpg" /></a></div>
							</div>
						</div>
					</li>
					<li class="fl">
						<div class="txt"><a href="#">汪夫人是我</a><span>6189观看</span></div>
						<div class="img clearfix">
							<div class="img imgl fl" style="position: relative;">
								<a href="#"><img src="image/2-image-16.jpg" /></a>
								<div class="flow">
									<div class="iconfont">&#xe633;</div>
									<div class="whitebg"></div>
									<div>时髦大衣，保温保</div>
								</div>
							</div>
							<div class="img imgr fl">
								<div class="imgt"><a href="#"><img src="image/2-image-17.jpg" /></a></div>
								<div class="imgb"><a href="#"><img src="image/2-image-18.jpg" /></a></div>
							</div>
						</div>
					</li>
					<li class="fl">
						<div class="txt"><a href="#">小热巴R</a><span>9223观看</span></div>
						<div class="img clearfix">
							<div class="img imgl fl" style="position: relative;">
								<a href="#"><img src="image/2-image-19.jpg" /></a>
								<div class="flow">
									<div class="iconfont">&#xe633;</div>
									<div class="whitebg"></div>
									<div>好物种草，还你好</div>
								</div>
							</div>
							<div class="img imgr fl">
								<div class="imgt"><a href="#"><img src="image/2-image-20.jpg" /></a></div>
								<div class="imgb"><a href="#"><img src="image/2-image-21.jpg" /></a></div>
							</div>
						</div>
					</li>
					<li class="fl">
						<div class="txt"><a href="#">赵大喜daxi</a><span>118480观看</span></div>
						<div class="img clearfix">
							<div class="img imgl fl" style="position: relative;">
								<a href="#"><img src="image/2-image-22.jpg" /></a>
								<div class="flow">
									<div class="iconfont">&#xe633;</div>
									<div class="whitebg"></div>
									<div>新品来袭，福利送</div>
								</div>
							</div>
							<div class="img imgr fl">
								<div class="imgt"><a href="#"><img src="image/2-image-23.jpg" /></a></div>
								<div class="imgb"><a href="#"><img src="image/2-image-24.jpg" /></a></div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>
